import React, { useState } from 'react'
import { EyeOutlined } from '@ant-design/icons'
import img1 from '../../../assets/a1.webp'
import './animation.css'
const Index: React.FC = () => {
    // 1、首先定义一个状态用于跟踪鼠标移动或移出的状态
    const [Animg, setAnimg] = useState(false)
    return (
        // 鼠标移入   移出事件
        <div className='animation-Box' onMouseEnter={() => { setAnimg(true) }} onMouseLeave={() => { setAnimg(false) }}>
            <div className='animation-Top'>
                <img src={img1} alt="" />
            </div>
            <div className='animation-Bottom'>
                {                //鼠标移入显示的内容
                    Animg ? <p className='animation-Title1'>
                        <h4 style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', marginTop: '10px' }}>创意国庆</h4>
                        <span style={{ color: '#999999' }}><EyeOutlined />520</span>
                        {/* 鼠标移除显示的内容 */}
                    </p> : <h4 className='animation-h4' >大气中国风国庆节赞颂祖国祝福贺卡企业放假通知宣传</h4>
                }
            </div>
        </div>
    )
}

export default Index